<!-- AI绘画 以图生图 -->

<template>
    <div class="page_container">
        <div class="page_main">
            <div class="canvas_box" :class="{ notright: loading || createData.length }">
                <div class="img_content">
                    <div class="loading" v-if="loading">
                        <img src="../assets/imgs/loading2.gif" alt="" />
                        <p>{{tip}}</p>
                        <el-progress style="z-index: 999;margin-top: -20px" :percentage="percentage" :color="customColor"></el-progress>
                    </div>
                    <div v-else>
                        <div class="img" v-if="createData.length" :style="{ transform: `scale(${scale})`, width: createImageSize.w + 'px', height: createImageSize.h + 'px' }">
                            <img :src="createData[createActiveIndex].img" alt="" />
                        </div>
                        <div class="default" v-else>
                          <svg t="1690307617217" class="icon" viewBox="0 0 1528 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9607" width="128" height="128"><path d="M907.462919 1018.1932h-11.859124L938.162809 325.921456h21.149392zM1056.386012 1018.1932h-11.859124L1087.08962 325.921456h21.149392z" fill="#0F264C" p-id="9608"></path><path d="M1180.54993 1018.1932h11.859125L1116.655644 325.921456h-21.145674z" fill="#0F264C" p-id="9609"></path><path d="M854.078271 558.482976h322.969686l15.353663-451.814055h-322.965969z" fill="#0F264C" p-id="9610"></path><path d="M943.590496 304.11405h152.068178l6.234405-183.359166c0.546486-16.060006-12.357282-29.380144-28.469334-29.380144h-95.066311c-15.35738 0-27.952588 12.145379-28.469334 27.458148l-6.297604 185.284879z" fill="#0F264C" p-id="9611"></path><path d="M1008.86401 157.570217h32.696238a20.000655 20.000655 0 0 0 20.015525-19.301748l1.628307-47.789669c0.643144-18.978317-14.606426-34.714892-33.644225-34.714892h-5.412817c-18.149293 0-33.027104 14.349912-33.644224 32.439724l-1.65433 48.711633c-0.382912 11.290333 8.688017 20.654952 20.015526 20.654952" fill="#0F264C" p-id="9612"></path><path d="M843.512869 558.482976H1166.478838l15.35738-451.814055h-322.969686z" fill="#C7E3FF" p-id="9613"></path><path d="M960.988836 145.922995c97.252256-44.127839 208.635086 4.290103 258.737099 95.527292 42.55158 77.485809 10.561684 220.274873-89.660929 181.292184-63.793911-24.814939-56.083621-117.884902-119.226954-141.242545-30.707325-11.360967-63.199096 12.156532-92.553217-11.130476C865.253358 228.29744 917.511575 165.648548 960.988836 145.922995" fill="#0053CC" p-id="9614"></path><path d="M1025.61177 263.785591C962.04835 200.415486 873.194139 63.366388 779.428986 181.128609 691.742099 291.251175 839.040604 423.497142 932.13659 468.721672c88.069799 42.774635 275.243216 65.604379 298.340626-73.106484 23.287008-139.863317-146.73343-73.879743-204.865446-131.829597" fill="#318FFF" p-id="9615"></path><path d="M733.427479 320.07368c46.719002-3.483385 75.392804 53.693208 120.542982 44.722655 27.815037-5.520627 45.354645-30.134816 68.942778-42.904751 20.811091-11.271745 44.376918-7.345966 62.674916 3.245459C1023.425825 347.037389 1053.31528 403.819918 1022.827292 449.222892c-28.852246 42.960515-84.716529 19.130738-115.472183 63.444457-27.744403 39.979005-14.227232 97.244821-76.917017 99.572035-47.458803 1.762139-84.493474-37.603462-76.259004-88.077235 4.386761-26.863333 11.044971-44.17245-4.55777-68.236435-13.435384-20.718151-36.655476-26.038028-53.299143-42.648237-33.023386-32.967623-12.030134-89.549401 37.105304-93.203797" fill="#71B8FF" p-id="9616"></path><path d="M514.933334 246.48391a1353.947692 1353.947692 0 0 0-18.353761 39.034735 843.622427 843.622427 0 0 0-16.587904 39.852607c-1.312311 3.334682-2.490788 6.699104-3.751052 10.048656-0.594815 1.423838-0.713778 2.130181-0.550204 3.717594 0.338301 3.085603 3.717594 8.104355 8.171271 12.413046 9.067211 8.773522 21.536021 16.580469 33.666531 23.227526l-4.769673 13.074778a125.353548 125.353548 0 0 1-11.17137-3.38301c-3.643242-1.263982-7.264178-2.635774-10.825633-4.230622-7.141498-3.15252-14.175185-6.877549-20.95236-11.937194-3.36814-2.561422-6.72141-5.423969-9.814447-9.033753-3.048427-3.606066-5.981609-7.992827-7.747466-13.598959-1.851362-5.490886-1.858797-12.465092-0.096657-18.026612 1.09669-3.620936 2.126464-7.275331 3.282635-10.870245a496.923339 496.923339 0 0 1 15.613894-42.335959c5.754835-13.918671 11.918606-27.354056 19.034081-40.930709l24.848397 12.978121z" fill="#FF8B7B" p-id="9617"></path><path d="M522.959619 259.748284c-6.152618 11.524541-13.34988 21.402188-13.349879 21.402188l-3.468516-3.513126-28.725847-29.079019s12.171402-41.090565 23.554674-43.585071c13.450255-2.955487 24.246147 10.372087 29.904326 25.142088 2.617186 6.825502-2.223121 18.933706-7.918475 29.63294" fill="#006CFF" p-id="9618"></path><path d="M522.959619 259.748284c-6.152618 11.524541-13.34988 21.402188-13.349879 21.402188l-3.468516-3.513126c3.304941-14.375936 10.435286-45.16133 8.996578-55.366125 5.985326 7.777206 7.621067 24.023092 7.821817 37.477063" fill="#004DAA" p-id="9619"></path><path d="M521.468864 386.823079L509.617175 411.909402l-9.39436-21.220026s8.32741-18.376067 19.59172-16.691996l1.650611 12.821981z" fill="#FF8B7B" p-id="9620"></path><path d="M490.82102 411.91312l-9.405512-15.472626 18.811025-5.743683 9.394359 21.216309z" fill="#FF8B7B" p-id="9621"></path><path d="M548.986494 990.255482c3.394163-2.059547 8.20473-4.394196 9.873929-3.624654 0.211903 0.100375 0.464699 0.275102 0.542769 0.825306 0.141269 1.018621-0.074352 1.77701-0.669167 2.319779-1.39038 1.263982-4.981576 1.431274-9.747531 0.479569zM551.968004 980.054405c0.09294 0 0.189597 0.007435 0.29369 0.022305 0.825306 0.096657 1.00375 0.464699 1.06695 0.776977 0.371759 1.888538-2.732432 6.342215-5.338465 8.431503 0.148704-2.635774 0.762107-7.082016 2.539116-8.658276a2.107876 2.107876 0 0 1 1.438709-0.572509zM736.922017 970.210216l0.074352 0.007435c0.301125 0.029741 0.50931 0.18588 0.66545 0.483287 0.408935 0.780695 0.446111 1.505626 0.10781 2.211969-0.962857 2.022371-5.026187 4.003849-11.022666 5.405381 3.241742-3.635807 7.951933-8.11179 10.100703-8.11179 0.052046 0 0.100375 0 0.148703 0.011153zM728.141061 966.89784c0.498158 0 0.646861 0.237926 0.706343 0.334583 0.996315 1.609718-1.275135 7.606197-3.576326 10.751282-0.524181-2.111593-1.382945-6.554118-0.01487-9.175022a3.401598 3.401598 0 0 1 2.111593-1.77701 2.691538 2.691538 0 0 1 0.77326-0.133833z" fill="#0053CC" p-id="9622"></path><path d="M585.039719 171.678485c2.899723 0.557639 7.918475 2.847677 6.163771 6.279016-1.754704 3.427622-6.695387 5.892386-7.966804 4.212034-1.271417-1.672917-3.085603-11.416731 1.803033-10.487332" fill="#9FC6FF" p-id="9623"></path><path d="M585.099201 178.124793c2.553987 1.494473 6.513224 5.338465 3.717594 7.981674-2.795631 2.643209-8.275364 3.304941-8.91479 1.293723-0.643144-2.003783 0.907093-11.792208 5.197196-9.275397" fill="#9FC6FF" p-id="9624"></path><path d="M585.820414 179.098803c2.553987-1.066949 6.338498-0.620838 9.550499 2.438741 3.208284 3.063297 5.56152 6.252993 8.319975 7.100605 0 0-3.557737 1.959172-7.055993 2.029806-3.56889 0.074352-8.829285-10.654624-11.636069-9.182457l0.817871-2.386695z" fill="#9FC6FF" p-id="9625"></path><path d="M585.876178 178.585775c1.565107-2.293755 4.981576-3.981543 9.334878-3.16739 4.35702 0.817871 8.059744 2.211968 10.836786 1.412686 0 0-1.925714 3.591196-4.818001 5.56152-2.95177 2.003783-13.190023-4.126529-14.747695-1.356922l-0.605968-2.449894z" fill="#9FC6FF" p-id="9626"></path><path d="M549.22442 138.480372c3.193413 16.309084 10.394392 49.351059-0.981445 60.236174 0 0 4.442525 16.54701 34.659128 16.54701 33.224137 0 15.877843-16.543293 15.877843-16.543293-18.130705-4.345867-17.666006-17.840733-14.506051-30.51401l-35.049475-29.725881z" fill="#FF8B7B" p-id="9627"></path><path d="M583.701386 184.875944c2.446177 0.546486 1.788163-8.041156 0.914528-8.963119-2.007501-2.130181-32.142317-6.260428-32.789178-1.416403-0.241644 2.081853-0.20075 6.174923 0.899657 7.609914 1.09669 1.434991 9.699202-2.412718 30.974993 2.769608" fill="#9FC6FF" p-id="9628"></path><path d="M604.638874 97.460441a1.304875 1.304875 0 0 1-1.159889-1.88482c3.219436-6.44259 9.163869-7.189827 9.416665-7.212132a1.301158 1.301158 0 0 1 0.297408 2.583728c-0.193315 0.022306-4.821719 0.654297-7.390577 5.799446a1.301158 1.301158 0 0 1-1.163607 0.713778" fill="#0F264C" p-id="9629"></path><path d="M614.546262 111.717414s4.892354 9.011448 9.554216 13.074777c-2.56514 3.070733-7.639655 2.442459-7.639655 2.44246l-1.914561-15.517237z" fill="#FF5652" p-id="9630"></path><path d="M612.118673 108.181982c0.271384 2.200816 1.654329 3.840274 3.085603 3.66183 1.434991-0.178445 2.37926-2.107876 2.104158-4.304974-0.271384-2.204533-1.650612-3.840274-3.085603-3.665547-1.434991 0.178445-2.37926 2.104158-2.104158 4.308691" fill="#0F264C" p-id="9631"></path><path d="M613.605711 104.074041l5.078233-2.17851s-2.19338 4.46483-5.078233 2.17851" fill="#0F264C" p-id="9632"></path><path d="M695.950415 990.35214l26.69976-6.193512-12.517139-62.440707-26.699759 6.193512zM515.431492 990.55289h27.406102l-2.14877-63.667513h-27.406102z" fill="#FF8B7B" p-id="9633"></path><path d="M545.008668 987.366912h-30.789112a2.171075 2.171075 0 0 0-2.185945 1.877385l-3.509409 24.435744c-0.360607 2.535399 1.810468 4.933247 4.394196 4.888636 10.736411-0.18588 15.911302-0.817871 29.443344-0.817871 8.334845 0 28.92288 0.869917 40.425116 0.869917 11.253157 0 12.115638-11.413013 7.323659-12.446504-21.472822-4.632122-33.287336-11.022666-40.521773-17.11952a7.141498 7.141498 0 0 0-4.580076-1.687787M722.114841 977.113788l-28.439593 11.836819a2.182228 2.182228 0 0 0-1.301158 2.576292l6.096854 23.922717c0.631991 2.475918 3.557737 3.858862 5.925845 2.825371 9.844189-4.301256 14.379653-6.873831 26.881921-12.08218 7.695419-3.197131 23.941305-9.026318 34.566188-13.446537 10.390675-4.327279 6.82922-15.197524 2.007501-14.312736-21.602938 3.977825-31.852344 1.330899-40.863792-1.520496a7.13778 7.13778 0 0 0-4.877484 0.20075" fill="#14365B" p-id="9634"></path><path d="M710.129318 921.732792l6.710257 33.450909-26.963708 4.933248-6.457461-32.186928zM513.279005 926.903965h27.417255l1.092972 32.815201h-27.417255z" fill="#EA7063" p-id="9635"></path><path d="M646.796389 259.78546a906.386564 906.386564 0 0 1-4.126529 38.592342v0.037176c-2.453612 19.851951-5.922127 43.979136-10.665777 73.284929h-111.304761c0.427523-10.372087 0.754672-19.79247 0.754672-29.309511 0-17.000557-1.048361-34.231604-4.483419-57.206334a689.591359 689.591359 0 0 0-2.583727-15.985654c-3.107908-17.554478-7.427753-38.39531-13.413079-64.225152 0 0 23.294443-5.085668 47.243183-6.267863 18.747826-0.888505 34.090336-1.475885 50.548124 0l2.026089 0.197032c2.490788 0.230491 4.974141 0.524181 7.461211 0.817871a517.165638 517.165638 0 0 1 24.342804 3.680418c7.490952 1.308593 12.498551 2.360672 12.498551 2.360672s6.018784 2.133899 1.69894 54.020357" fill="#006CFF" p-id="9636"></path><path d="M646.796389 259.78546a906.386564 906.386564 0 0 1-4.126529 38.592342c-6.379391-13.651005-18.613993-41.023648-20.08616-52.674587l24.208971 14.078528z" fill="#004DAA" p-id="9637"></path><path d="M660.216903 232.73253a1150.54326 1150.54326 0 0 0 18.773849 41.97907c6.654493 13.740227 13.624982 27.394949 21.506281 39.387907l3.018686 4.252927 0.516745 0.728649c0.063199 0.115245 0.111528 0.18588 0.130116 0.219338 0.055764 0.130116 0.018588 0.074352-0.096657 0.089222-0.223056-0.096657-0.776977-0.100375-0.706343 0.022306 0.055764 0.085505 0.658014 0.111528 1.561389-0.148704 1.858797-0.516746 4.516877-2.022371 7.119193-3.888603 2.635774-1.877385 5.312442-4.133964 7.918475-6.598729 5.264113-4.884918 10.405545-10.409263 15.27931-16.219863a435.739179 435.739179 0 0 0 14.342478-17.814709l11.970652 7.055993c-7.037405 14.810894-15.182653 28.539968-25.959958 41.767167a98.163066 98.163066 0 0 1-9.156434 9.561652c-3.464797 3.070733-7.342248 6.074548-12.769935 8.479831-2.743584 1.163607-5.992761 2.156204-9.859059 2.342084a23.119716 23.119716 0 0 1-11.970652-2.762172 25.346555 25.346555 0 0 1-4.795696-3.416469 21.431929 21.431929 0 0 1-1.914561-1.895973l-0.825306-0.914528-0.516746-0.639426-4.122811-5.093103c-10.245689-13.65844-18.179034-27.762991-25.521282-42.112904a485.294705 485.294705 0 0 1-19.922586-43.897349l25.997134-10.483614z" fill="#FF8B7B" p-id="9638"></path><path d="M645.104884 205.761386c13.621264 3.330964 34.201864 47.499697 34.201863 47.499697l-29.521413 35.008582S609.575839 240.736509 614.044387 226.215588c4.661863-15.130607 14.532074-24.495226 31.056779-20.450484" fill="#006CFF" p-id="9639"></path><path d="M757.91527 285.871817l22.301846-13.361033-18.01546-15.238417s-15.911302 13.037602-16.491247 24.450615l12.204861 4.148835z" fill="#FF8B7B" p-id="9640"></path><path d="M798.823673 278.585333c-3.301223-1.858797-6.357086-4.067048-9.342313-6.375674-1.49819-1.152454-2.95177-2.356955-4.423937-3.546584-1.464732-1.18963-2.933182-2.37926-4.383043-3.591196a525.173335 525.173335 0 0 1-8.676864-7.32366 303.322202 303.322202 0 0 1-8.502138-7.565304 2.609751 2.609751 0 1 1 2.988946-4.238057c3.356987 1.780727 6.661928 3.635807 9.940846 5.528062 3.278918 1.892255 6.53553 3.817969 9.769837 5.773424 1.620871 0.966574 3.226871 1.966607 4.832872 2.955487 1.609718 0.992598 3.226871 1.970325 4.806849 3.000098 3.159955 2.059547 6.252993 4.215751 9.100669 6.72141a5.353335 5.353335 0 0 1 0.490723 7.531845 5.316159 5.316159 0 0 1-6.602447 1.130149" fill="#9FC6FF" p-id="9641"></path><path d="M820.828111 283.845728c-2.037241-1.487038-3.836557-2.617186-4.981575-6.505789-1.048361-3.583761-7.494669-3.739899-9.368337 0.453546-1.736116 3.881168 0.951704 6.899854 5.03734 8.49842 1.97776 0.776977 4.364455 1.018621 6.409131 0.921963a25.729467 25.729467 0 0 1-1.42012-1.115278c-1.323463-1.126431 1.089255-2.119029 4.323561-2.252862" fill="#0053CC" p-id="9642"></path><path d="M822.229644 284.927548a23.153175 23.153175 0 0 0-1.401533-1.078102c-3.234307 0.126398-5.647025 1.122713-4.323561 2.252862 0.483287 0.408935 0.959139 0.769542 1.42012 1.11156 3.234307-0.148704 5.628437-1.167324 4.304974-2.28632M817.515735 283.548321c-0.542769 0.096657-1.022338-0.066917-1.074384-0.364325-0.052046-0.297408 0.345736-0.609685 0.888504-0.706343 0.542769-0.09294 1.022338 0.070634 1.078103 0.364325 0.044611 0.297408-0.349454 0.613403-0.892223 0.706343" fill="#71B8FF" p-id="9643"></path><path d="M795.217607 259.885835l-11.07843-9.041188-21.937521 6.42772 18.011742 15.238417zM537.424777 109.780547c4.992729 26.82244 6.528095 38.280064 21.848299 50.46262 23.041647 18.327738 54.789899 6.316192 57.89409-21.457952 2.788195-25.004536-5.836622-64.663828-33.532697-72.147345-27.287139-7.371989-51.198703 16.320237-46.209692 43.142677" fill="#FF8B7B" p-id="9644"></path><path d="M600.378512 109.672737c8.903637-13.308986 17.286812-38.291217-2.724997-49.916133-19.089845-11.089583-56.232325-23.636462-77.980249 3.241742-20.357544 25.160675-22.353892 73.117636 35.625702 73.660405 57.983312 0.550204 45.079543-26.986014 45.079544-26.986014" fill="#0F264C" p-id="9645"></path><path d="M572.567192 58.987062c7.996544-10.21223 20.721868-53.789866-23.446865-55.247163-44.168733-1.461014-37.990092 52.511014-9.632285 64.362703 21.446799-2.736149 33.07915-9.11554 33.07915-9.11554" fill="#0F264C" p-id="9646"></path><path d="M572.069034 60.578192a0.817871 0.817871 0 0 1-0.587379-0.245361 0.829023 0.829023 0 0 1 0.01487-1.163607c5.316159-5.212067 15.993089-24.796351 9.636003-40.105403a0.825306 0.825306 0 0 1 0.446112-1.078102 0.829023 0.829023 0 0 1 1.066949 0.446111c6.219535 14.981903-3.208284 35.246508-10.004045 41.912154a0.810435 0.810435 0 0 1-0.57251 0.234208M509.31605 65.095069a0.817871 0.817871 0 0 1-0.776977-1.08182c1.141301-3.394163 4.57264-5.780858 9.665744-6.73628 7.870146-1.475885 17.454103 0.821588 20.930053 5.015034a0.817871 0.817871 0 0 1-1.256547 1.052079c-3.089321-3.728747-12.145379-5.806882-19.372381-4.457395-2.598598 0.490722-7.145215 1.86995-8.416633 5.650743a0.817871 0.817871 0 0 1-0.773259 0.557639M544.859965 173.808667a0.817871 0.817871 0 0 1-0.743519-1.15989c4.509441-9.929693 16.167816-14.15288 24.220124-11.866559a0.817871 0.817871 0 0 1-0.446111 1.57626c-7.253026-2.063265-18.186469 1.944302-22.286975 10.974337a0.810435 0.810435 0 0 1-0.743519 0.475852" fill="#0F264C" p-id="9647"></path><path d="M538.510314 168.711846a0.821588 0.821588 0 0 1-0.669167-1.297441c6.710257-9.498452 22.944989-9.212198 29.551154-5.892386a0.825306 0.825306 0 0 1 0.360607 1.100408 0.817871 0.817871 0 0 1-1.092973 0.364324c-6.003914-3.014969-21.376165-3.271483-27.484171 5.379358a0.821588 0.821588 0 0 1-0.669167 0.345737" fill="#0F264C" p-id="9648"></path><path d="M544.863682 67.515222c-0.044611 0-0.081787 0-0.126398-0.011152C528.223732 65.020717 514.208403 50.838096 512.156291 34.514142 510.278906 19.680942 518.736433 7.12291 535.35036 0.066917a0.810435 0.810435 0 0 1 1.070667 0.434958 0.817871 0.817871 0 0 1-0.431241 1.078102C520.100789 8.319975 512.000152 20.253451 513.773445 34.305956c1.974042 15.621329 15.390839 29.194265 31.2092 31.573525a0.817871 0.817871 0 0 1-0.118963 1.635741" fill="#0F264C" p-id="9649"></path><path d="M536.763045 119.502055c-6.639623 10.561684-12.212296 43.64827 26.774111 43.730057 38.990125 0.085505 37.93061-34.595929 33.569873-40.246671-4.364455-5.650743-60.343984-3.483385-60.343984-3.483386" fill="#0F264C" p-id="9650"></path><path d="M586.578803 116.509392c1.241676 5.520627 4.907224 9.948281 8.862744 12.368435 5.94815 3.643242 10.807045-1.241676 10.736411-7.862711-0.066917-5.963021-3.241742-15.045102-9.974304-15.996806-6.632187-0.944269-11.041254 5.186043-9.624851 11.491082" fill="#FF8B7B" p-id="9651"></path><path d="M554.053574 340.323414c-3.501973 14.208644-20.119618 9.550499-32.588428 2.066982 0-17.000557-1.044644-34.231604-4.4797-57.206334 6.052243 2.988945 7.948216 13.717921 13.152847 21.628961 10.372087 15.818362 28.004635 17.000557 23.915281 33.510391" fill="#318FFF" p-id="9652"></path><path d="M602.623938 371.699907s-5.234372 62.094971-12.825698 135.153125c-3.36814 32.521511-7.227003 67.247556-11.286615 99.609211-2.713844 21.595503-5.494604 42.105468-8.308823 60.254761-13.316421 85.891289-23.818624 286.652511-23.818624 286.652512H508.985184s-17.796122-193.902262-11.022666-278.841847c17.112085-214.969866-12.922356-253.008287 22.736804-302.827762h81.924616z" fill="#9FC6FF" p-id="9653"></path><path d="M589.801957 506.853032c-3.371858 32.525229-7.23072 67.247556-11.290332 99.609211-9.684332-58.158039-15.375968-155.960499-11.189958-177.329229l22.48029 77.720018z" fill="#77B3FC" p-id="9654"></path><path d="M718.032923 946.90462l-36.644323 5.613567s-57.90896-184.91312-74.0396-269.094316c-17.602807-91.731629-56.830858-311.723965-56.830857-311.723964h81.50081l4.055895 28.060398c3.338399 22.840897 8.342281 57.466566 13.710486 95.14438 8.866461 61.671165 18.714368 131.5768 23.94874 171.615287 11.286615 86.482386 44.298849 280.380931 44.298849 280.38093" fill="#9FC6FF" p-id="9655"></path><path d="M649.785334 494.904685a28.737001 28.737001 0 0 1-4.122811-3.38301c-14.004176-13.717921-1.568825-37.31349-15.539543-50.574147-6.773456-6.431437-17.963414-3.870015-23.06767-13.323857-9.227068-17.000557 11.517106-27.632875 25.130935-27.930282 1.304875-0.033458 2.613468 0 3.888603 0.066916 3.338399 22.840897 8.345998 57.466566 13.710486 95.14438M621.583667 464.751281c2.449894 6.959336 1.382945 13.680745-2.386695 15.01908-3.76964 1.338334-8.810697-3.223154-11.264309-10.178772-2.446177-6.963053-1.379227-13.680745 2.390412-15.01908 3.765923-1.338334 8.810697 3.223154 11.260592 10.178772" fill="#0053CC" p-id="9656"></path><path d="M626.520632 207.962202c-0.193315 4.985293 4.550335 9.186174-1.241676 12.862875-4.349585 2.788195-10.271712 1.475885-12.565468-3.345835-1.208218-2.56514-1.635741-4.397914-4.580075-5.613567-2.550269-1.052079-5.03734-0.197032-7.654526-0.721213-5.104256-1.018621-6.576424-7.026252-2.156205-10.074679 2.877418-1.970325 6.639623-1.085537 9.944564-1.349487 7.457493 0.921963 14.788588 2.0707 20.937489 3.085603-1.40525 1.345769-2.583728 2.88857-2.684103 5.152585" fill="#71B8FF" p-id="9657"></path><path d="M723.427152 947.057041l-46.92347 7.992827-5.327312-17.762663 50.217258-8.613666zM551.484717 954.105599H503.884645l-2.501941-16.751478 50.373397-1.710093z" fill="#0053CC" p-id="9658"></path><path d="M519.041275 365.130918l-5.018752 9.992893c-0.390347 0.77326 0.524181 1.565107 1.810469 1.565107h116.725012c1.00375 0 1.832774-0.490722 1.895973-1.126431l1.007468-9.992893c0.066917-0.691472-0.803-1.275135-1.895973-1.275134H520.851743c-0.829023 0-1.561389 0.334583-1.810468 0.836458" fill="#14365B" p-id="9659"></path><path d="M534.1756 377.774455h-3.018686c-0.598533 0-1.055797-0.312278-1.018621-0.69519l1.416403-12.981838c0.044611-0.382912 0.568792-0.691472 1.171042-0.691472h3.018687c0.598533 0 1.055797 0.30856 1.01862 0.691472l-1.416403 12.981838c-0.044611 0.382912-0.568792 0.69519-1.171042 0.69519M607.345283 377.774455h-3.018687c-0.598533 0-1.055797-0.312278-1.01862-0.69519l1.416403-12.981838c0.044611-0.382912 0.565074-0.691472 1.167324-0.691472h3.022404c0.60225 0 1.059514 0.30856 1.014903 0.691472l-1.412685 12.981838c-0.044611 0.382912-0.568792 0.69519-1.171042 0.69519" fill="#9FC6FF" p-id="9660"></path><path d="M305.502683 1019.022224c-0.100375 0.211903 6.970489-38.677847 10.643471-52.555625 9.360901-35.387776 23.275855-57.161724 45.179918-61.533614 19.372382-3.866298 30.737066 5.003881 42.637085 26.186731 0.892223 1.587413 5.260395 9.639721 6.453743 11.725291 7.959368 13.87406 13.506019 16.889029 23.3911 9.576522 25.889324-19.145608 42.98282-14.773718 62.459295 6.037373 0.765824 0.817871 7.130345 7.83297 8.862744 9.606262 3.044709 3.115344 5.43884 5.078233 7.650808 6.171206 1.955454 0.962857 3.713876 1.2045 5.457428 0.724931 39.161134-10.766152 77.957944-1.948019 113.892206 19.279442a202.014052 202.014052 0 0 1 23.66992 16.338825 157.59624 157.59624 0 0 1 6.390544 5.401664c1.100408 0.981445 1.855079 1.691505 2.249145 2.081852l3.256612 3.182261H305.000808l0.50931-2.245427-0.011153 0.022306z m95.218732-86.080887c-11.20111-19.937456-21.305531-27.829908-38.666694-24.36511-20.052701 4.003849-33.283618 24.710847-42.317371 58.842076-1.345769 5.085668-3.159955 13.621264-4.910942 22.342739l-0.453546 2.278885a1639.503513 1639.503513 0 0 0-4.762238 25.067736l-0.074352 0.420088h348.784658l-0.487005-0.423806a159.261722 159.261722 0 0 0-3.197131-2.680385l-1.163606-0.944269a198.315046 198.315046 0 0 0-23.234962-16.0377c-35.146133-20.762762-72.961498-29.357839-111.014789-18.89653-2.676668 0.736084-5.357053 0.371759-8.085766-0.977727-2.676668-1.316028-5.353335-3.513126-8.665712-6.907289-1.79188-1.829056-8.193577-8.885049-8.918507-9.662027-18.320303-19.576849-33.402581-23.431994-57.533483-5.587543-12.193708 9.018883-19.918868 4.818002-28.826223-10.714106-1.226806-2.133899-5.602414-10.204795-6.468614-11.755032z" fill="#0B29B9" p-id="9661"></path><path d="M328.875195 1020.683988s7.074581-75.084244-27.677486-75.325887c-27.677486-0.189597-41.521806 57.198899-41.521806 57.198899s-22.141989-15.677093-43.176135-7.453775c-20.833396 8.141531-23.25355 25.580763-23.25355 25.580763h135.628977z" fill="#FFFFFF" p-id="9662"></path><path d="M301.208862 943.499304c16.431765 0.115245 25.346555 15.004209 28.688672 39.268944 1.535366 11.145346 1.724964 22.956142 1.130148 33.755752a152.618382 152.618382 0 0 1-0.297407 4.334715l-0.163574 1.68407H191.112319l0.297407-2.111593c0.144986-1.063232 0.572509-2.825371 1.427557-5.048493a35.822735 35.822735 0 0 1 6.53553-10.762434c4.119094-4.702756 9.554216-8.554184 16.450353-11.249439 1.040926-0.408935 2.100441-0.765824 3.174825-1.070667 10.50592-3.011251 21.654984-1.18963 32.458312 3.643242 2.475918 1.104125 4.739932 2.290038 6.743715 3.47595l0.323431 0.193315c0.446111-1.59113 0.951704-3.319811 1.524213-5.16002l0.446112-1.401533a156.187272 156.187272 0 0 1 7.855275-19.90028c8.940813-18.535923 19.785035-29.740751 32.86353-29.651529z m-0.022306 3.717594c-11.178805-0.074352-21.115933 10.193642-29.487954 27.54737a152.547747 152.547747 0 0 0-7.665679 19.424428c-0.743519 2.319779-1.386663 4.472265-1.918278 6.405415-0.315995 1.152454-0.527898 1.970325-0.631991 2.397848l-0.643144 2.665515-2.237992-1.583695a36.952883 36.952883 0 0 0-2.297473-1.457297 62.790161 62.790161 0 0 0-6.36452-3.282636c-10.078397-4.505724-20.391002-6.186076-29.919196-3.457362-0.962857 0.271384-1.910843 0.594815-2.843959 0.959139-6.33478 2.4722-11.275462 5.974173-15.004209 10.234536a32.127446 32.127446 0 0 0-5.862646 9.643439c-0.219338 0.572509-0.408935 1.118996-0.576227 1.643176l-0.141268 0.4647h131.565647l0.007435-0.100376c0.037176-0.483287 0.070634-1.00375 0.104093-1.550236l0.048329-0.847612c0.583662-10.58399 0.397783-22.17173-1.100408-33.049409-3.119061-22.632712-11.097018-35.960286-25.03056-36.056943z" fill="#0B29B9" p-id="9663"></path><path d="M300.517389 962.176496l3.572608 1.022338-16.606492 57.998182-3.572608-1.022338z" fill="#0B29B9" p-id="9664"></path><path d="M463.545034 1019.07427l-43.347145-177.700988c-2.96664-12.17512-14.424264-20.234863-26.766676-18.829613-13.033884 1.487038-22.647582 12.992991-21.896628 26.22019l10.178772 170.626406 81.831677-0.315995z" fill="#FFFFFF" p-id="9665"></path><path d="M393.223028 820.696025c13.27181-1.509343 25.591916 7.156368 28.781612 20.234864l43.347144 177.700987 0.557639 2.293756-2.356954 0.007435-81.831677 0.315995-1.758421 0.007436-0.104093-1.754705-10.178772-170.637559c-0.806718-14.201209 9.524476-26.569643 23.543522-28.164491z m25.16811 21.115933c-2.743584-11.264309-13.338727-18.718085-24.748022-17.420644-12.052439 1.37551-20.948642 12.022699-20.253451 24.261017l10.074679 168.871702 77.7163-0.301125-42.789506-175.41095z" fill="#0B29B9" p-id="9666"></path><path d="M397.420191 840.194805l29.606918 178.723326-3.669265 0.605968-29.606918-178.719608z" fill="#0B29B9" p-id="9667"></path><path d="M416.852055 876.709012l3.717594 0.122681c-0.01487 0.334583-0.048329 0.933116-0.126399 1.754704-0.126398 1.353204-0.323431 2.855112-0.605967 4.472266a55.789931 55.789931 0 0 1-4.119095 13.58037c-2.022371 4.420219-4.617252 8.290234-7.858993 11.450189l-2.594881-2.665515c2.88857-2.814219 5.230655-6.305039 7.070864-10.327475 1.840209-4.022437 3.085603-8.345998 3.840275-12.676996 0.260232-1.516778 0.446111-2.922029 0.565074-4.178575 0.070634-0.743519 0.104093-1.2677 0.111528-1.531649zM386.300868 930.238647a53.827042 53.827042 0 0 0 7.026253 9.676896c6.003914 6.542965 12.550597 10.119291 19.338923 9.353467l0.412653 3.695288c-8.20473 0.921963-15.762598-3.204566-22.491443-10.535661a57.500025 57.500025 0 0 1-7.569021-10.442721l3.282635-1.747269zM439.484766 966.778877l3.635807 0.758389a22.402221 22.402221 0 0 1-0.356889 1.40525 45.956896 45.956896 0 0 1-6.918442 14.182621c-3.695288 5.078233-8.372021 9.178739-14.13801 11.922324l-1.598565-3.360705c5.174891-2.45733 9.383207-6.145183 12.732759-10.747564a42.276478 42.276478 0 0 0 6.345933-13.007861c0.159857-0.565074 0.256514-0.959139 0.297407-1.152454zM383.226418 854.637657a24.796351 24.796351 0 0 0 2.78076 6.13403c3.040992 4.784543 6.92216 6.884984 12.05244 5.226937l1.141301 3.53915c-7.000229 2.264015-12.476245-0.706343-16.33139-6.773456a28.458181 28.458181 0 0 1-3.234307-7.163804l3.591196-0.962857z" fill="#0B29B9" p-id="9668"></path><path d="M780.867695 1020.683988l22.874355-177.801363c1.565107-12.178838 11.840537-21.294378 24.004504-21.294377 12.85544 0 23.46917 10.137879 24.175513 23.093693l9.62485 176.002047h-80.679222z" fill="#FFFFFF" p-id="9669"></path><path d="M827.746554 819.729451c13.84432 0 25.268486 10.914856 26.030592 24.852115l9.62485 176.002047 0.107811 1.959172h-84.753706l0.267667-2.096723 22.874355-177.801363c1.68407-13.104518 12.747629-22.915249 25.848431-22.915248z m0 3.717594c-11.227134 0-20.714433 8.416633-22.160578 19.673506l-22.60297 175.70464h76.597304l-9.51704-174.039157c-0.635709-11.691833-9.989175-20.892878-21.472823-21.324119l-0.843893-0.01487z" fill="#0B29B9" p-id="9670"></path><path d="M827.609003 839.302583l-9.602545 181.381405" fill="#FFFFFF" p-id="9671"></path><path d="M825.753923 839.209643l3.710159 0.193315-9.602545 181.381405-3.713876-0.197032z" fill="#0B29B9" p-id="9672"></path><path d="M809.039621 877.181147s2.643209 18.193904 15.089714 27.844778" fill="#FFFFFF" p-id="9673"></path><path d="M810.87983 876.91348c0.037176 0.226773 0.111528 0.687755 0.245361 1.342051 0.226773 1.107843 0.527898 2.345802 0.903376 3.680418 1.078102 3.821687 2.58001 7.639655 4.561487 11.18624 2.353237 4.215751 5.230655 7.762336 8.676864 10.431569l-2.278885 2.936899c-3.870015-3.000098-7.063428-6.929595-9.643438-11.558a55.801084 55.801084 0 0 1-4.892354-11.981805 55.094741 55.094741 0 0 1-0.966574-3.951802 29.89689 29.89689 0 0 1-0.282537-1.550237l3.680418-0.535333z" fill="#0B29B9" p-id="9674"></path><path d="M848.10038 926.30915s-8.966836 22.576948-25.290791 22.602971" fill="#FFFFFF" p-id="9675"></path><path d="M846.371699 925.621395l3.457362 1.37551a53.113264 53.113264 0 0 1-1.736116 3.699006 55.726732 55.726732 0 0 1-5.044775 8.037438c-5.665613 7.472364-12.405611 12.026416-20.238581 12.037569l-0.003718-3.717594c6.446308-0.011153 12.245754-3.929497 17.283094-10.56912 1.803033-2.37926 3.375575-4.940682 4.702756-7.498387 0.791847-1.531649 1.319746-2.713844 1.579978-3.364422z" fill="#0B29B9" p-id="9676"></path><path d="M796.875654 967.678534s5.713942 17.416927 22.707063 23.249833" fill="#FFFFFF" p-id="9677"></path><path d="M798.641511 967.09859c0.230491 0.706343 0.750954 1.99263 1.59113 3.672983 1.412686 2.821654 3.219436 5.63959 5.449993 8.267928 3.925779 4.632122 8.732628 8.148966 14.502334 10.130444l-1.208218 3.516844c-6.446308-2.211968-11.795925-6.126595-16.134358-11.242004a45.399256 45.399256 0 0 1-7.286484-11.992958c-0.223056-0.553921-0.371759-0.959139-0.446111-1.193348l3.531714-1.159889z" fill="#0B29B9" p-id="9678"></path><path d="M842.973818 851.968425s-2.557705 16.803524-15.364815 14.219797" fill="#FFFFFF" p-id="9679"></path><path d="M841.137327 851.689605l3.6767 0.557639c-0.078069 0.520463-0.256514 1.382945-0.557639 2.475918a27.465584 27.465584 0 0 1-2.055829 5.3459c-3.126496 6.052243-8.085767 9.331161-14.959598 7.940781l0.736083-3.643242c5.007599 1.011186 8.483549-1.286287 10.922291-6.007632 0.754672-1.457297 1.338334-3.037274 1.773292-4.617252 0.260232-0.944269 0.408935-1.665482 0.4647-2.052112z" fill="#0B29B9" p-id="9680"></path><path d="M160.869693 1020.888456h1368.074548" fill="#FFFFFF" p-id="9681"></path><path d="M160.869693 1022.747253h1368.074548v-3.717594H160.869693z" fill="#0B29B9" p-id="9682"></path><path d="M1054.326465 904.453415c9.784707-8.911073 21.799971-12.933509 37.276314-11.513388 19.725553 1.810468 38.149948 13.624982 61.674883 36.781874 4.115376 4.052177 8.401762 8.446373 13.591523 13.911236 2.988945 3.141367 13.383338 14.197491 13.703051 14.535792 36.439855 38.59606 58.291872 55.801084 86.13665 62.206499l-0.832741 3.624654c-28.811353-6.62847-51.072305-24.156925-88.0066-63.280883l-0.063199-0.066917-0.315995-0.334583c-1.011186-1.078102-3.829122-4.074483-6.691669-7.104322l-1.219371-1.297441c-2.223121-2.360672-4.312409-4.57264-5.405382-5.725094a576.178723 576.178723 0 0 0-13.506018-13.822014c-22.95986-22.602971-40.759699-34.015984-59.40715-35.726077-26.071486-2.390413-38.491967 8.922225-54.03151 39.61468l-1.925713 3.829122-0.49444 0.981444-0.379195 0.750954-0.20075 0.401501c-11.784773 23.368795-19.487627 32.714826-33.83754 35.387776-14.978186 2.788195-24.491508 10.468744-29.714728 21.588067-2.059547 4.383043-3.334682 9.082082-3.97039 13.862908-0.431241 3.264047-0.520463 6.137747-0.408935 8.383174 0.011153 0.29369 0.026023 0.490722 0.037176 0.579945l-3.706441 0.334583a19.149326 19.149326 0 0 1-0.044611-0.736083 51.116916 51.116916 0 0 1 0.438676-9.048624 50.797203 50.797203 0 0 1 4.290103-14.959598c5.721377-12.17512 16.216145-20.647516 32.398831-23.662485 12.77737-2.37926 19.926303-11.052407 31.198048-33.406298l0.20075-0.397783 2.803065-5.568955c7.598762-15.007926 12.892616-23.275855 20.409591-30.123664zM1451.707511 943.499304c16.431765 0.115245 25.346555 15.004209 28.688672 39.268944 1.535366 11.145346 1.724964 22.956142 1.130148 33.755752a152.614664 152.614664 0 0 1-0.301125 4.334715l-0.159857 1.68407H1341.614685l0.297408-2.111593c0.144986-1.063232 0.572509-2.825371 1.427556-5.048493a35.822735 35.822735 0 0 1 6.53553-10.762434c4.119094-4.702756 9.554216-8.554184 16.446635-11.249439 1.044644-0.408935 2.104158-0.765824 3.178543-1.070667 10.50592-3.011251 21.654984-1.18963 32.458312 3.643242 2.475918 1.104125 4.736215 2.290038 6.743716 3.47595l0.32343 0.193315c0.446111-1.59113 0.947986-3.319811 1.524214-5.16002l0.446111-1.401533a156.161249 156.161249 0 0 1 7.855276-19.90028c8.937096-18.535923 19.785035-29.740751 32.86353-29.651529z m-0.026024 3.717594c-11.175087-0.074352-21.115933 10.193642-29.487954 27.54737a152.525442 152.525442 0 0 0-7.661961 19.424428c-0.743519 2.319779-1.386663 4.472265-1.918279 6.405415-0.315995 1.152454-0.527898 1.970325-0.631991 2.397848l-0.643143 2.665515-2.237992-1.583695a36.952883 36.952883 0 0 0-2.297473-1.457297 62.790161 62.790161 0 0 0-6.364521-3.282636c-10.078397-4.505724-20.391002-6.186076-29.919195-3.457362-0.962857 0.271384-1.910843 0.594815-2.847677 0.959139-6.331062 2.4722-11.271745 5.974173-15.000491 10.234536a32.127446 32.127446 0 0 0-5.862646 9.643439c-0.223056 0.572509-0.408935 1.118996-0.576227 1.643176l-0.141269 0.4647h131.565648l0.007435-0.100376c0.037176-0.483287 0.070634-1.00375 0.104093-1.550236l0.048328-0.847612c0.579945-10.58399 0.394065-22.17173-1.100407-33.049409-3.119061-22.632712-11.097018-35.960286-25.034278-36.056943z" fill="#0B29B9" p-id="9683"></path></svg>
                             <p>期待您的创作</p>
                        </div>
                    </div>
                </div>
                <div class="img_list" :class="{ show: createData.length || loading }">
                    <div class="list" v-if="createData.length">
                        <div class="item" :class="{ active: createActiveIndex == index }" v-for="(item, index) in createData" :key="'create_' + item.id" @click="changeCurrentImage(index)">
                            <img :src="item.img" alt="" />
                        </div>
                    </div>
                    <div class="list" v-if="loading">
                        <div class="item" v-for="(item, index) in countActiveValue" :key="'loading_' + item">
                            <a-spin />
                        </div>
                    </div>
                </div>
                <div class="img_tools" v-if="createData.length && !loading">
                    <a-tooltip placement="right">
                        <template slot="title">
                            <span>收藏</span>
                        </template>
                        <div class="item" @click="collectHandle">
                            <a-icon type="heart" theme="filled" :style="{ fontSize: '16px', color: createData[createActiveIndex].collect ? '#FF3434' : '' }" />
                        </div>
                    </a-tooltip>
                    <a-tooltip placement="right">
                        <template slot="title">
                            <span>下载</span>
                        </template>
                        <div class="item" @click="downloadHandle">
                            <a-icon type="download" />
                        </div>
                    </a-tooltip>
                    <a-tooltip placement="right">
                        <template slot="title">
                            <span>放大</span>
                        </template>
                        <div class="item" @click="scaleHandle(0.1)">
                            <a-icon type="zoom-in" />
                        </div>
                    </a-tooltip>
                    <a-tooltip placement="right">
                        <template slot="title">
                            <span>缩小</span>
                        </template>
                        <div class="item" @click="scaleHandle(-0.1)">
                            <a-icon type="zoom-out" />
                        </div>
                    </a-tooltip>
                </div>
            </div>
          <el-drawer
              title="描述咒语"
              :visible.sync="drawer"
              direction="rtl"
              size="61.8%"
              :with-header="false"
          	  style="width:100%;">
              <div class="drawer_wrap">
                  <div class="drawer_main">
                      <div class="dm_side">
                          <div  :class="{ draw_active:isActive === index}" v-for="(item,index) in sideData" @click="sideClick(index,item.id)">{{item.title}}</div>
                      </div>
                      <div class="dm_tag">
                          <div class="tag_box" v-for="(item,index) in mainData">
                              <div class="tag_title">{{item[0].role}}</div>
                              <el-button class="tag_btn" size="small" @click="tagbtnClick(value.title)" v-for="(value,key) in item">{{value.title}}</el-button>
                          </div>
                      </div>
                  </div>
              </div>
          </el-drawer>
            <div class="config_box">
                <div class="mask_box" v-if="loading"></div>
                <div class="params_box">
					
                <div class="label_box">
                <div class="label">
                  <div class="back" @click="goBack">
                      <a-icon type="left-circle" style="fontSize: 24px, color: #00aaff, margin-right:20px" />
                  </div>
                  图片素材
                  <a href="/#/drawing/canvas?id=1" style="background-color: #aa55ff ;color: #fff;border-radius: 15px;padding: 5px 15px;margin-left: 200px;width:90px"><a-icon type="font-colors" style="margin-right: 3px;"/>文生图</a>
                  <a href="/#/photo/" style="background-color: #ff4196 ;color: #fff;border-radius: 15px;padding: 5px 20px;width:100px">历史记录</a>
                </div>
						
                <div class="upload">
                    <div class="image" v-if="picture.image">
                        <img :src="picture.image" alt="" />
                        <div class="delete">
                            <a-icon type="delete" :style="{ fontSize: '20px' }" @click="deleteUploadPicture" />
                        </div>
                    </div>
                    <div class="add" v-else @click="picture.show = true">
                        <a-icon type="plus" :style="{ fontSize: '26px', color: '#4c5b74' }" />
                    </div>
                </div>
                    </div>
                    <div class="label_box">
                        
                        <div class="label">
                            <span>画面描述</span>
                        </div>
                        <div class="desc">
                            <div class="desc_input">
                                <a-textarea v-model="descValue" placeholder="请输入作品的描述词汇(中文)" :auto-size="{ minRows: 4 }" />
                            </div>
                            <div class="desc_button" @click="drawer = true">
                                <a-icon type="alert" />
                                <span>推荐提示词</span>
                            </div>
                        </div>
                    </div>
                    <div class="label_box">
                            <div class="label">模型选择</div>
                            <div class="list fillet speed">
                                <div class="item" :class="{ active: img_type == 2 }" @click="img_type = 2">
                                    <div class="c-line-1">专业画质（SD）</div>
                                </div>
                                <div class="item" :class="{ active: img_type == 1 }"  @click="img_type = 1">
                                    <div class="c-line-1">超高画质（MJ）</div>
                                </div>
                            </div>
                    </div>
                    <div class="label_box" :class="{ hide: img_type == 1 }">
                        <div class="label">特效增强</div>
                        <div class="block">
                            <div class="list fillet speed">
								<div class="item" style="width: 20%;"  :class="{ active: tesegn == 1 }" @click="tesegn = 1">
								    <div class="c-line-1">无</div>
								</div>
                                <div class="item" style="width: 20%;"  :class="{ active: tesegn == 2 }" @click="tesegn = 2">
                                    <div class="c-line-1">艺术二维码</div>
                                </div>
                                <div class="item" style="width: 30%;"  :class="{ active: tesegn == 3 }"  @click="tesegn = 3">
                                    <div class="c-line-1">字体(LOGO)沉浸</div>
                                </div>
                                <div class="item" style="width: 30%;"  :class="{ active: tesegn == 5 }"  @click="tesegn = 5">
                                    <div class="c-line-1">电商制图</div>
                                </div>
								<div class="item" style="width: 20%;"  :class="{ active: tesegn == 4 }"  @click="tesegn = 4">
								    <div class="c-line-1">线稿上色</div>
								</div>
                            </div>
                        </div>
                    </div>
					<div class="label_box" :class="{ hide: img_type == 1 }">
					    <div class="label">重绘幅度(取值越大画面与参考图差别越大)</div>
					    <div class="block">
					        <el-slider
					            v-model="value2"
					            :step="1"
					        >
					        </el-slider>
					    </div>
					</div>
                    <div class="label_box">
                        <div class="label">画布比例</div>
                        <div class="list size">
                            <div class="item" :class="{ active: sizeActive == item.id }" v-for="(item, index) in sizeData" :key="'size_' + item.id" @click="sizeActive = item.id">
                                <div class="graph" :style="legendSize(item)"></div>
                                <div class="text">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="label_box">
                        <div class="label">定义风格</div>
                        <div class="list style">
                            <div v-if="img_type== 1" class="item" :class="{ active: styleActive == item.id }" v-for="(item, index) in styleData" :key="'style_' + item.id" @click="styleActive = item.id">
                            <div class="img">
                            		<div class="xzstyle" style="position: absolute;margin-left:80%;display: none;"><a-icon type="check-circle" theme="twoTone" /></div>
                                    <img :src="item.img" alt="" />
                                    <p class="c-line-1">{{ item.value }}</p>
                                </div>
                            </div>
                            <div v-if="img_type== 2 || img_type== 3" class="item" :class="{ active: styleActive == item.id }" v-for="(item, index) in styleData2" :key="'style_' + item.id" @click="styleActive = item.id">
                                <div class="img">
                            		<div class="xzstyle" style="position: absolute;margin-left:80%;display: none;"><a-icon type="check-circle" theme="twoTone" /></div>
                                    <img :src="item.img" alt="" />
                                    <p class="c-line-1">{{ item.value }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="label_box" :class="{ hide: img_type == 2 }">
                        <div class="label">图片数量</div>
                        <div class="list count">
                            <div class="item" :class="{ active: countActive == item.id }" v-for="(item, index) in countData" :key="'count_' + item.id" @click="change_pic_num(item.id,item.value)">
                                <div class="text">{{ item.value }}</div>
                            </div>
                        </div>
                    </div> -->
                    <div class="label_box" :class="{ hide: img_type == 1 ||  img_type == 3}">
                        <div class="label">图片数量（{{sd_useable}}积分/张，会员免费）</div>

                        <div class="list count">
                            <div class="item" :class="{ active: countActive == 26 }"  @click="countActive = 26">
                                <div class="text">1</div>
                            </div>
                            <div class="item" :class="{ active: countActive == 29 }"  @click="countActive = 29">
                                <div class="text">4</div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="label_box" :class="{ hide: img_type == 2 || img_type == 3}">
                        <div class="label">生成速度 (会员不消耗积分)</div>
                        <div class="list fillet speed">
                            <div class="item" :class="{ active: speedActiveIndex == index }" v-for="(item, index) in speedData" :key="'speed_' + item.id" @click="speedActiveIndex = index">
                                <div class="c-line-1">{{ item.value }}({{ item.usable }}积分)</div>
                            </div>
                        </div>
                    </div> -->

                </div>
                <div class="button_box">
                    <a-button v-if="img_type== 2 && countActive == 26" type="primary" :loading="loading" class="button" @click="submitHandle">立即生成(消耗{{sd_useable}}积分，会员免费)</a-button>
                    <a-button v-if="img_type== 2 && countActive == 29" type="primary" :loading="loading" class="button" @click="submitHandle">立即生成(消耗{{sd_useable*4}}积分，会员免费)</a-button>
                    <a-button v-if="img_type== 1" type="primary" :loading="loading" class="button" @click="submitHandle">立即生成(消耗{{mj_useable}}积分，会员免费)</a-button>
                </div>
            </div>
        </div>
        <a-modal v-model="picture.show" title="添加图片" width="70%" cancelText="取消" okText="确定" :maskClosable="false" @ok="addPictureOkHandle">
            <div class="picture_box">
                <div class="box_head">
                    <a-radio-group v-model="picture.type" size="small">
                        <a-radio-button :value="1">我的作品</a-radio-button>
                        <a-radio-button :value="2">本地上传</a-radio-button>
                    </a-radio-group>
                </div>
                <div class="box_body">
                    <div class="image_list" v-if="picture.type == 1" @scroll="addPictureScroll">
                        <a-row type="flex" align="middle">
                            <a-col :span="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in works.data" :key="'works_' + index">
                                <div class="item">
                                    <div class="image" :class="{ active: picture.active == item.id }" @click="changeAddPicture(item.id, item.image)">
                                        <img :src="item.image" alt="" />
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="status_text" v-if="works.data.length">
                            <span class="more" v-if="works.status == 'loadmore'" @click="loadMorePicture">点击加载更多</span>
                            <span v-if="works.status == 'loading'">加载中...</span>
                            <span v-if="works.status == 'nomore'">没有更多了</span>
                        </div>
                    </div>
                    <div class="image_list" v-if="picture.type == 2">
                        <a-row type="flex" align="middle">
                            <a-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
                                <div class="item">
                                    <div class="upload">
                                        <a-upload name="file" list-type="picture-card" :show-upload-list="false" :action="upload.action" :headers="upload.headers" :accept="upload.accept" :data="upload.data" :before-upload="uploadPictureBefore" @change="uploadPictureChange">
                                            <a-icon :type="upload.loading ? 'loading' : 'plus'" :style="{ fontSize: '24px', color: '#8895a4' }" />
                                            <div class="text" v-if="!upload.loading">
                                                支持JPG、PNG格式 <br />
                                                20M内
                                            </div>
                                        </a-upload>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in local.data" :key="'local_' + index">
                                <div class="item">
                                    <div class="image" :class="{ active: picture.active == item.id }" @click="changeAddPicture(item.id, item.image)">
                                        <img :src="item.image" alt="" />
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="status_text" v-if="local.data.length">
                            <span class="more" v-if="local.status == 'loadmore'" @click="loadMorePicture">点击加载更多</span>
                            <span v-if="local.status == 'loading'">加载中...</span>
                            <span v-if="local.status == 'nomore'">没有更多了</span>
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { create, all } from "mathjs"
const math = create(all, {
    number: "BigNumber",
    precision: 20
})
import { apiList } from "@/api/api"
import { downloadPicture, sizePicture, Debounce } from "@/utils/tools"
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
export default {
    data() {
        return {
            // 画布比例
            sizeData: [],
            sizeActive: 0,
			tesegn:1,
            // 风格
            styleData: [{ id: 0, value: "不限定", img: require("@assets/imgs/style_default.png") }],
			styleData2: [{ id: 0, value: "不限定", img: require("@assets/imgs/style_default.png") }],
            styleActive: 0,
            // 艺术家
            artistData: [{ id: 0, value: "不限定" }],
            artistActive: 0,
            // 装饰词
            bedeckData: [],
            // 图片数量
            countData: [],
            countActive: 0,
            countActiveValue: 0,
            // 生成图片
            createData: [],
            createActiveIndex: 0,
            // 预览图缩放
            scale: 1,
            // 提交状态
            loading: false,
            // 描述词
            descValue: "",
            // 绘图任务ID
            drawingTaskId: "",
            // 定时器
            timerTask: null,
            // 关键词
            keywordData: [],
            keywordUpdate: false,
            keywordActiveIndex: 0,
            // 关键词模板
            keywordTemplateData: [],
            keywordTemplateUpdate: false,
            keywordTemplateActiveIndex: null,
            // 生成速度
            speedData: [],
            speedActiveIndex: 0,

            // 添加图片
            picture: {
                show: false,
                type: 1,
                active: null,
                image: ""
            },
            // 作品图片库
            works: {
                data: [],
                page: 1,
                pagesize: 20,
                status: "loadmore" // loadmore nomore loading
            },
            // 本地图片库
            local: {
                data: [],
                page: 1,
                pagesize: 20,
                status: "loadmore" // loadmore nomore loading
            },
            // 上传信息
            upload: {
                loading: false,
                action: apiList.common.upload.url,
                headers: {
                    token: ""
                },
                accept: "image/png, image/jpeg",
                data: {
                    is_user_image: 1
                }
            },
            prompt_id: this.$route.query.id,
            //模型选择
            img_type:2,
            value2:80,
            showModal: false,
            showModelType: "wxoa", // wxoa wxscan contact
            tip:'正在生成任务',
            percentage: 0,
            customColor: '#409eff',
            drawer: false,
            isActive: false,
            sideData:[],
            mainData:[],
            dm_text:'',
            sd_useable:10,
            mj_useable:100,
            picnum:4
        }
    },
    watch: {
        "picture.show": {
            deep: true,
            handler: function (newValue, oldValue) {
                if (!newValue) {
                    // this.picture.active = null
                    // this.picture.image = ""
                }
            }
        },
        "picture.type": {
            deep: true,
            handler: function (newValue, oldValue) {
                this.picture.active = null
                this.picture.image = ""
            }
        }
    },
    computed: {
        ...mapGetters("user", ["token", "userInfo"]),
        // 图例尺寸
        legendSize() {
            return item => {
                const size = sizePicture(true, item.w, item.h, 20)
                return {
                    width: size.w + "px",
                    height: size.h + "px"
                }
            }
        },
        // 预览图尺寸
        createImageSize() {
            return sizePicture(false, this.createData[this.createActiveIndex].w, this.createData[this.createActiveIndex].h, 600)
        }
    },
    created() {
        this.upload.headers.token = this.token

        this.getDrawingConfig()
        // this.getKeyword()
        this.getDrawingRecord()
        this.getUploadMatter()
        this.getAllTag()
    },
    mounted() {},
    beforeDestroy() {
        clearInterval(this.timerTask)
    },
    methods: {
        ...mapActions("user", ["getUserInfo"]),
        // 加载更多图片 点击
        change_pic_num(id,num){
            this.countActive = id;
            this.picnum = num;
        },
        loadMorePicture() {
            if (this.picture.type == 1) {
                console.log("作品图片库")
                this.works.page++
                this.getDrawingRecord()
            } else {
                console.log("本地图片库")
                this.local.page++
                this.getUploadMatter()
            }
        },
        sideClick(index,id){
            this.isActive = index;
            this.getOneTag(id);
            // console.log(123)
        },
        tagbtnClick(title){
            this.dm_text = title+',';
            this.descValue = this.descValue  + this.dm_text;
            // console.log(title);
        },
        //获取描述咒语
        getAllTag(){
            this.$http("drawing.alltag")
                .then(res => {
                    if (res.code === 1) {
                        this.sideData = res.data.tag
                        this.mainData = res.data.content
                    }
                })
                .catch(err => {
                    this.keywordUpdate = false
                })
        },
        getOneTag(id){
            this.$http("drawing.onetag",{ id: id })
                .then(res => {
                    if (res.code === 1) {
                        this.mainData = res.data
                    }
                })
                .catch(err => {
                    this.keywordUpdate = false
                })
        },
        // 上传图片之后
        uploadPictureChange(info) {
            if (info.file.status === "uploading") {
                this.upload.loading = true
                return
            }
            if (info.file.response.code != 1) {
                this.upload.loading = false
                this.$message.error(info.file.response.msg)
                return
            }
            if (info.file.status === "done") {
                this.upload.loading = false
                const time = new Date().getTime()
                this.local.data.unshift({
                    id: "local_" + time,
                    image: info.file.response.data.fullurl
                })
            }
        },
        // 上传图片之前
        uploadPictureBefore(file) {
            const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png"
            if (!isJpgOrPng) {
                this.$message.error("仅支持JPG、PNG格式!")
            }
            const isLt2M = file.size / 1024 / 1024 < 20
            if (!isLt2M) {
                this.$message.error("图片大小超过20MB!")
            }
            return isJpgOrPng && isLt2M
        },
        // 修改当前选中添加的图片
        changeAddPicture(id, image) {
            this.picture.active = id
            this.picture.image = image
        },
        // 添加图片确认按钮
        addPictureOkHandle() {
            this.picture.show = false
        },
        // 滚动条监听
        addPictureScroll: Debounce(
            function (e) {
                let scrollTop = e.target.scrollTop
                let clientHeight = e.target.clientHeight
                let scrollHeight = e.target.scrollHeight
                if (scrollTop + clientHeight >= scrollHeight - 50) {
                    if (this.picture.type == 1) {
                        console.log("作品图片库")
                        this.works.page++
                        this.getDrawingRecord()
                    } else {
                        console.log("本地图片库")
                        this.local.page++
                        this.getUploadMatter()
                    }
                }
            },
            20,
            false
        ),
        // 获取素材数据
        getUploadMatter() {
            this.local.status = "loading"
            this.$http("drawing.matter", { page: this.local.page, pagesizze: this.local.pagesize }).then(res => {
                if (res.code === 1) {
                    if (res.data && res.data.length) {
                        const arr = res.data.map(({ id, fullimage }) => ({ id: "local_" + id, image: fullimage }))
                        this.local.data = this.local.data.concat(arr)
                        this.local.status = "loadmore"
                    } else {
                        this.local.page--
                        this.local.status = "nomore"
                    }
                }
            })
        },
        // 获取绘画记录
        getDrawingRecord() {
            this.works.status = "loading"
            this.$http("drawing.record", { page: this.works.page, pagesize: this.works.pagesize }).then(res => {
                if (res.code === 1) {
                    if (res.data && res.data.length) {
                        this.works.data = this.works.data.concat(res.data)
                        this.works.status = "loadmore"
                    } else {
                        this.works.page--
                        this.works.status = "nomore"
                    }
                }
            })
        },
        // 删除上传图片
        deleteUploadPicture() {
            this.$confirm({
                title: "确定要删除图片吗？",
                content: "",
                okText: "确定",
                okType: "danger",
                cancelText: "取消",
                onOk: () => {
                    this.picture.image = ""
                    this.picture.active = null
                },
                onCancel: () => {}
            })
        },
      
        // 获取绘画配置
        getDrawingConfig() {
            this.$http("drawing.config", { prompt_id: this.prompt_id }).then(res => {
                if (res.code === 1) {
                    res.data.scale.length && ((this.sizeData = res.data.scale.map(({ id, name }) => ({ id, value: name, w: Number(name.split(":")[0]), h: Number(name.split(":")[1]) }))), (this.sizeActive = this.sizeData[0].id))
                    res.data.style.length && (this.styleData = this.styleData.concat(res.data.style.map(({ id, image, name }) => ({ id, img: image, value: name }))))
                    res.data.style2.length && (this.styleData2 = this.styleData2.concat(res.data.style2.map(({ id, image, name }) => ({ id, img: image, value: name }))))
					res.data.artists.length && (this.artistData = this.artistData.concat(res.data.artists.map(({ id, name }) => ({ id, value: name }))))
                    res.data.magic_words.length && (this.bedeckData = res.data.magic_words.map(({ id, name }) => ({ id, value: name, checked: false })))
                    this.sd_useable = res.data.ai_img.usable;
                    this.mj_useable = res.data.ai_img.mj_usable;
				  
                    if (res.data.pic_size.length) {
                        this.countData = res.data.pic_size.map(({ id, name }) => ({ id, value: name }))
                        const arr = this.countData.filter(item => item.value == 1)
                        arr && arr.length && (this.countActive = arr[0].id)
                    }

                    if (res.data.mode.length) {
                        this.speedData = res.data.mode.map(({ name, type, usable }, index) => ({ id: index + 1, value: name, type, usable }))
                    } else {
                        this.$error({
                            title: "系统提示",
                            content: "请前往后台配置绘画信息"
                        })
                    }
                }
            })
        },
        // 提交
        submitHandle() {
            // console.log(this.countActive);
            // console.log(this.countData.filter(item => item.id == this.countActive)[0].value);
            // return false;
            this.percentage = 0
			if(this.img_type==1){
				this.countActive=29
			}
            if (!this.sizeActive || !this.countActive) {
                Promise.reject("画布比例或图片数量ID错误 => 异常拦截")
                return
            }
            if (!this.picture.image) {
                this.$message.warning("请选择创作素材")
                return
            }

            if (!this.speedData[this.speedActiveIndex].type) {
                this.$message.warning("请选择绘画生成速度")
                return
            }

            const arr = this.bedeckData.filter(item => item.checked == true).map(item => item.id)
            this.countActiveValue = Number(this.countData.filter(item => item.id == this.countActive)[0].value)
			
            const obj = {
				tesegn:this.tesegn,
                image_url: this.picture.image,
                prompt_id: this.prompt_id,
                des: this.descValue,
                neg_prompt: "",
                style: this.styleActive,
                artists: this.artistActive,
                magic_words: arr.toString() || "",
                pic_size: this.countActive,
                scale: this.sizeActive,
                mode: this.speedData[this.speedActiveIndex].type,
                img_type:this.img_type,
                denoisingStrength:(this.value2)/100
            }
            console.log(obj, "obj")

            this.loading = true
            this.$http("drawing.picture", obj).then(res => {
                if (res.code === 1) {
                    this.drawingTaskId = res.data.task_id
                  
                    this.tip = '正在努力绘画';
                    const timer = setTimeout(() => {
                        this.getDrawingResult()
                        clearTimeout(timer)
                    }, 5000)
                } else {
                    this.loading = false
                    this.$message.error("生成图片失败！请刷新页面后重试。")
                }
            })
        },
        // 定时任务 (弃用)
        timerInterval() {
            this.timerTask = setInterval(() => {
                setTimeout(() => {
                    if (this.loading) this.getDrawingResult()
                    else clearInterval(this.timerTask)
                }, 0)
            }, 5000)
        },
        // 绘画结果
        getDrawingResult() {
            this.$http("drawing.result", { task_id: this.drawingTaskId }).then(res => {
                if(this.img_type == 1){
                   this.percentage =(parseFloat(res.msg))
                }
                if (res.code === 1) {
                    if(this.img_type == 2){
                        var temt_num = (parseFloat(res.msg))*100;
                        temt_num = temt_num.toFixed(2);
                        if(temt_num > 30){
                            this.percentage =temt_num
                        }

                    }
                    if (res.data) {
                        if (res.data.length) {
							const dd = res.data.map(({ id, image, width, height }) => ({ id, img: image, w: width, h: height, collect: false }));
							this.createData = dd.concat(this.createData)
                            // this.createData = this.createData.concat(res.data.map(({ id, image, width, height }) => ({ id, img: image, w: width, h: height, collect: false })))
                        } else {
                            this.$message.error("很抱歉，查询结果为空。")
                        }
                        this.loading = false
                    }
                } else {
                    this.loading = false
                    this.$message.error("生成图片失败！请刷新页面后重试。")
                }

                if (this.loading) {
                    const timer = setTimeout(() => {
                        this.getDrawingResult()
                        clearTimeout(timer)
                    }, 5000)
                }
            })
        },
        // 改变当前预览图片
        changeCurrentImage(index) {
            this.createActiveIndex = index
            this.scale = 1
        },
        // 返回上一页
        goBack() {
            this.$router.back()
            clearInterval(this.timerTask)
        },
        // 下载
        downloadHandle() {
            this.createData[this.createActiveIndex].img && downloadPicture(this.createData[this.createActiveIndex].img)
        },
        // 缩放
        scaleHandle(value) {
            const number = +math.format(math.add(math.bignumber(this.scale), math.bignumber(value)))
            if (number > 2 || number < 0.5) return
            this.scale = number
        },
        // 收藏
        collectHandle() {
            this.$http("drawing.collect", { draw_images_id: this.createData[this.createActiveIndex].id, type: "vote" }, false).then(res => {
                if (res.code === 1) {
                    this.createData[this.createActiveIndex].collect = !this.createData[this.createActiveIndex].collect
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-modal-content {
    .ant-modal-header {
        border: none;
    }
    .ant-modal-body {
        padding: 0 24px;
        height: 70vh;
        box-sizing: border-box;

        .picture_box {
            height: 100%;
            display: flex;
            flex-direction: column;
            .box_body {
                flex: 1;
                border: 1px dashed rgba(0, 0, 0, 0.45);
                border-radius: 10px;
                margin: 20px 0 10px 0;
                background: #f9f9fb;
                overflow: hidden;

                .image_list {
                    height: 100%;
                    overflow: hidden;
                    padding: 12px;

                    &:hover {
                        overflow-y: scroll;
                        overflow-x: hidden;
                        padding-right: 0;
                    }

                    &::-webkit-scrollbar {
                        width: 12px;
                    }

                    &::-webkit-scrollbar-thumb {
                        border-radius: 12px;
                        border: 4px solid rgba(0, 0, 0, 0);
                        box-shadow: 4px 0 0 rgba(0, 0, 0, 0.2) inset;
                    }

                    &::-webkit-scrollbar-thumb:hover {
                        box-shadow: 4px 0 0 #4a4a4a inset;
                    }

                    .item {
                        position: relative;
                        width: 100%;
                        padding-top: 100%;
                        overflow: hidden;

                        .image {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            padding: 10px;
                            cursor: pointer;
                            border-radius: 10px;

                            &.active {
                                border-color: #424ef2;
                                background: rgba($color: #424ef2, $alpha: 0.1);

                                img {
                                    border-color: #424ef2;
                                }
                            }

                            &:hover {
                                border-color: #424ef2;
                                background: rgba($color: #424ef2, $alpha: 0.1);

                                img {
                                    border-color: #424ef2;
                                }
                            }

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                border-radius: 10px;
                                border: 1.5px solid transparent;
                            }
                        }

                        .upload {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            padding: 10px;
                            cursor: pointer;

                            .ant-upload-picture-card-wrapper {
                                height: 100%;
                            }
                            .ant-upload.ant-upload-select-picture-card {
                                width: 100%;
                                height: 100%;
                                border-radius: 10px;

                                .text {
                                    font-size: 12px;
                                    color: #8895a4;
                                }
                            }
                        }
                    }

                    .status_text {
                        text-align: center;
                        padding-top: 10px;

                        .more {
                            cursor: pointer;

                            &:hover {
                                color: #424ef2;
                            }
                        }
                    }
                }

                .image_select {
                    .ant-upload-select-picture-card i {
                        font-size: 32px;
                        color: #999;
                    }
                }
            }
        }
    }
    .ant-modal-footer {
        border: none;
    }
}

.page_container {
    // background:radial-gradient(circle at 12% 55%, rgba(33, 150, 243, 0.15), rgba(255, 255, 255, 0) 25%), radial-gradient(circle at 85% 33%, rgba(108, 99, 255, 0.176), rgba(255, 255, 255, 0) 25%);;
    color: #000;
    width: 100%;
    height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;


    .page_main {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        position: relative;

        .canvas_box {
            width: calc(100% - 500px);
            height: 90vh;
            background: #fff;
            // border-right: 1px solid #000;
            padding: 20px;
            display: flex;
            flex-wrap: nowrap;
            position: absolute;
            top: -20px;
            right: 0;
            z-index: 1;

            &.notright {
                padding-right: 0;
            }

            .img_tools {
                width: 42px;
                height: calc(100% - 40px);
                position: absolute;
                top: 40px;
                left: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;

                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;

                .item {
                    width: 32px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background: #f7fcff;
                    color: #6e7ef4;
                    cursor: pointer;
                    font-size: 18px;
                    margin-bottom: 15px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &:hover {
                        background: #ffffff;
                    }
                }
            }

            .img_content {
                width: 100%;
                height: 100%;
                background-image: url("../assets/imgs/login_form_bgs.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                overflow: hidden;

                .loading {
                    img {
                        width: 500px;
                        height: auto;
                    }

                    p {
						
                        text-align: center;
                        font-size: 16px;
                        transform: translateY(-80px);
                    }
                }

                .default {
                    text-align: center;

                    p {
						color:#0053cc;
                        font-size: 14px;
                        margin-top: 8px;
                    }
                }

                .img {
                    width: 450px;
                    height: 450px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .img_list {
                width: 0;
                overflow: hidden;

                &.show {
                    width: 160px;
                }

                &:hover {
                    overflow-y: scroll;
                    overflow-x: hidden;
                }

                &::-webkit-scrollbar {
                    width: 12px;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: 12px;
                    border: 4px solid rgba(0, 0, 0, 0);
                    box-shadow: 4px 0 0 #ffffff inset;
                }

                &::-webkit-scrollbar-thumb:hover {
                    box-shadow: 4px 0 0 #ffffff inset;
                }

                .list {
                    margin-left: 16px;
                    .item {
                        width: 100px;
                        height: 100px;
                        border: 1.5px solid #dceefd;
                        overflow: hidden;
                        border-radius: 4px;
                        padding: 2px;
                        margin-bottom: 20px;
                        background: #d9eefe;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.active {
                            border-color: #424ef2;
                        }

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 2px;
                        }
                    }
                }
            }
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
        .config_box {
            width: 500px;
            height: 86vh;
            background: rgba(5,171,245,.03);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;

            .mask_box {
                width: 100%;
                height: 100%;
                background: rgba($color: #000000, $alpha: 0);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 99;
            }

            .params_box {
                flex: 1;
                overflow: hidden;
                padding: 20px 12px;

                &:hover {
                    overflow-y: scroll;
                    overflow-x: hidden;
                    padding-right: 0;
                }

                &::-webkit-scrollbar {
                    width: 12px;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: 12px;
                    border: 4px solid rgba(0, 0, 0, 0);
                    box-shadow: 4px 0 0 #ffffff inset;
                }

                &::-webkit-scrollbar-thumb:hover {
                    box-shadow: 4px 0 0 #ffffff inset;
                }

                .label_box {
                    font-size: 14px;
					font-weight: 500;
                    margin-bottom: 10px;

                    .label {
                        margin-bottom: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .key_word {
                            flex: 1;
                            margin-left: 20px;
                            text-align: right;

                            span {
                                margin-left: 15px;
                                cursor: pointer;

                                &.active {
                                    color: #3e97ff;
                                }

                                &:hover {
                                    color: #3e97ff;
                                }
                            }
                        }
                    }

                    .desc {
                        border: 1px solid #4c5b74;
                        border-radius: 4px;
                        overflow: hidden;
                        .desc_input {
                            textarea {
                                background: transparent;

                                border: none;
                                color: #000;
                                font-weight: normal;
                                font-size: 12px;
                            }
                        }

                        .desc_content {
                            border-top: 1px solid #4c5b74;
                            border-bottom: 1px solid #4c5b74;

                            .item {
                                padding: 6px 10px;
                                color: #8895a4;
                                cursor: pointer;
                                border: 1px solid transparent;

                                &:hover {
                                    background: #38465d;
                                    color: #c4d9f3;
                                }

                                &.active {
                                    border-color: #424ef2;
                                    background: rgba($color: #424ef2, $alpha: 0.1);
                                    color: #c4d9f3;
                                }
                            }
                        }

                        .desc_button {
                            height: 32px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;

                            &:hover {
                                background: #ffffff;
                            }

                            span {
                                margin-left: 4px;
                            }
                        }
                    }

                    .list {
                        display: flex;
                        flex-wrap: wrap;
                        .item {
                            background: #fff;
                            border-radius: 2px;
                            border: 1px solid transparent;
                            margin-right: 10px;
                            margin-bottom: 10px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;

                            &:hover {
                                border-color: #424ef2;
                                background: rgba($color: #424ef2, $alpha: 0.1);
                            }
                            &.active {
								color:#424ef2;
                                border-color: #424ef2;
                                background: rgba($color: #424ef2, $alpha: 0.1);
								.xzstyle{
									display: block!important;
								}
                            }
                        }
                    }

                    .size {
                        .item {
                            width: calc((100% - 40px) / 5);
                            height: 70px;

                            &:nth-child(5n) {
                                margin-right: 0;
                            }

                            .graph {
                                width: 20px;
                                height: 20px;
                                border: 1px solid #c4d9f3;
                                background: #2196f33b;
                                margin-bottom: 4px;
                            }
                        }
                    }

                    .style {
                        .item {
                            position: relative;
                            width: calc((100% - 40px) / 5);
                            height: 0;
                            padding-top: calc((100% - 40px) / 5);
                            border-color: #4c5b74;
                            overflow: hidden;
                            &:nth-child(5n) {
                                margin-right: 0;
                            }

                            .img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                // padding: 2px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    border-radius: 2px;
                                }

                                p {
                                    width: 100%;
                                    margin-bottom: 0;
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    z-index: 1;
                                    background: rgba($color: #000000, $alpha: 0.5);
									color:#fff;
                                    backdrop-filter: blur(5px);
                                    text-align: center;
                                    font-size: 12px;
                                }
                            }
                        }
                    }

                    .fillet {
                        .item {
                            width: calc((100% - 40px) / 5);
                            height: 32px;
                            border-radius: 2px;

                            &:nth-child(5n) {
                                margin-right: 0;
                            }
                        }
                    }

                    .count {
                        .item {
                            width: 32px;
                            height: 32px;
                        }
                    }

                    .speed {
                        .item {
                            width: 47%;
                        }
						.items {
						    width: 33%;
						}
                    }
					.upload {
					                        width: 90px;
					                        height: 90px;
					                        border: 1px dashed #4c5b74;
					                        border-radius: 4px;
					                        overflow: hidden;
					                        cursor: pointer;
					
					                        .image {
					                            width: 100%;
					                            height: 100%;
					                            padding: 4px;
					                            position: relative;
					
					                            &:hover {
					                                .delete {
					                                    display: flex;
					                                }
					                            }
					
					                            img {
					                                width: 100%;
					                                height: 100%;
					                                object-fit: cover;
					                            }
					
					                            .delete {
					                                width: 100%;
					                                height: 100%;
					                                position: absolute;
					                                top: 0;
					                                left: 0;
					                                background: rgba($color: #000000, $alpha: 0.5);
					                                display: flex;
					                                align-items: center;
					                                justify-content: center;
					                                display: none;
					
					                                i {
					                                    color: #fff;
					
					                                    &:hover {
					                                        color: #8895a4;
					                                    }
					                                }
					                            }
					                        }
					                        .add {
					                            width: 100%;
					                            height: 100%;
					                            display: flex;
					                            align-items: center;
					                            justify-content: center;
					                        }
											}
                }
            }

            .button_box {
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;

                .button {
                    width: 300px;
                    height: 46px;
                    border-radius: 46px;
                    border: none;
					background: #1890ff;
                    position: relative;

                    &:hover {
						background: #5eacff;
                    }
                }
            }
        }
    }
}



.hide{
    display: none;
}
.drawer_wrap{
    height: 100%;
}

.drawer_wrap .drawer_main{
    display: flex;
    height: 100%;

}
.drawer_wrap .drawer_main .dm_side{
    height: 100%;
    color: #000;
    border-right:1px solid #ccc;
    flex-direction: column;
	// padding: 10px;
    width: 10%;

}
.drawer_wrap .drawer_main .dm_side div{
    padding: 10px 20px;
    margin-left: 10px;
	margin-top: 10px;
    cursor: pointer;

}
.draw_active{
    border-right:2px solid blue;
    color: blue;
}
.tag_title{
    font-size: 1.2vw;
    color: #000;
    font-weight: bold;
}
.tag_box{
    padding: 10px;

}
.dm_tag{
	padding: 10px;
    width: 90%;
    overflow-y: auto;
}
.tag_btn{
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 0;
}

::v-deep .el-textarea{
    height: 100%;

}
::v-deep .el-textarea__inner{
    height: 100% !important;
    background-color: #f2f2f2;
    border: none;
    border-radius: 0;

}
::v-deep .el-textarea__inner::placeholder{
    color: #999;
}
::v-deep .el-progress__text{
    color: #fff !important;
    font-size: 18px !important;
}
</style>
